<template>
	<view class="add">
		<view class="conbox" v-if="imgflage" @click="hideimg">
			<view class="con">
				<image mode="widthFix" src="../../../static/images/my/zhifu.png"></image>
				<view class="tip1">保存图片->打开支付宝->扫描保存图片->复制用户ID</view>
				<view class="btn" @click.stop="saveimg">保存图片</view>
			</view>
		</view>
		<view class="erweima">
			<view class="listtop">
				<!-- <label class="iconfont icon-weixinzhifu"></label> -->
				<text>{{ name }}支付</text>
			</view>
			<view class="middle">
				<view class="tui-upload-item" v-for="(item, index) in files" :key="index">
					<image :src="item" class="tui-upload-img" @tap="previewImage" mode="aspectFill" :id="item"></image>
					<tui-icon color="#ed3f14" name="close-fill" class="tui-upload-del" :index="index" @click="deleteImage"></tui-icon>
				</view>
				<image v-if="files.length == 0" src="../../../static/images/icon/greyewm.png"></image>
			</view>
			<view class="bottom">
				<view class="tui-upload-item tui-upload-add" v-if="files.length < 2" hover-class="tui-opcity" :hover-stay-time="150" @tap="chooseImage">
					<text>+上传二维码</text>
				</view>
			</view>
		</view>
		<view class="tip">{{ explain }}</view>
		<view class="box">
			<view class="item">
				<view class="leftitem">昵称 <span>*</span></view>
				<view><input v-model="username" type="text" /></view>
			</view>
			<view class="item">
				<view class="leftitem">账号 <span>*</span></view>
				<view><input v-model="account" type="text" /></view>
			</view>
			<view class="item">
				<view class="leftitem">每单最大</view>
				<view><input v-model="danmax"  type="number" /></view>
			</view>
			<view class="item">
				<view class="leftitem">每单最小</view>
				<view><input v-model="danmin"  type="number"/></view>
			</view>
			<view class="item">
				<view class="leftitem">每天最大</view>
				<view><input v-model="daymax"  type="number" /></view>
			</view>
			<view class="item" v-if="id == 2">
				<view class="leftitem">用户ID<span>*</span> </view>
				<view><input v-model="accountid"  type="number" /></view>
			</view>
			<view class="item1" @tap="showimg()" v-if="id == 2"><view>获取用户ID?</view></view>
		</view>
		<view class="tip1">
			<view>请核对二维码信息</view>
			<view>上传后点击【确认二维码】</view>
		</view>
		<view class="tijiao" @tap="tijiao">确认二维码</view>
	</view>
</template>

<script>
import tuiIcon from '@/components/icon/icon';
var _this;
export default {
	components: {
		tuiIcon
	},
	data() {
		return {
			files: [], //最多上传9张图片
			name: '',
			id: '',
			explain: '',
			username: '',
			account: '',
			temppath: '',
			qrcode_id: '',
			accountid: '',
			danmax: '',
			danmin: '',
			daymax: '',
			imgflage: false
		};
	},
	methods: {
		showimg() {
			this.imgflage = true;
		},
		hideimg() {
			this.imgflage = false;
		},
		tijiao() {
			console.log(_this.temppath);
			if (this.username == '' || this.account == '') {
				uni.showToast({
					title: '信息不能为空',
					icon: 'none'
				});
			} else {
				if (this.id == 2) {
					if (this.temppath || this.accountid) {
					} else {
						uni.showToast({
							title: '信息不能为空',
							icon: 'none'
						});
						return;
					}
				}
				var username = this.username.replace(/\s*/g, '');
				var zhanghu = this.account.replace(/\s*/g, '');
				var data = {
					token: uni.getStorageSync('token'),
					ploatform_id: this.id,
					nickname: username,
					account: zhanghu,
					single_max: this.danmax,
					single_min: this.danmin,
					total_max: this.daymax,
					qrcode_id: this.qrcode_id
				};
				if (this.id * 1 == 2) {
					var zhanghuid = this.accountid.replace(/\s*/g, '');
					data.userId = zhanghuid;
				}
				if (this.temppath) {
					data.img_url = this.temppath;
				}
				this.$store.dispatch('editqrcode', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if (res.data.code == 1) {
						var data = {
							token: uni.getStorageSync('token')
						};

						this.$store.dispatch('qrcodelist', data);
						uni.navigateBack({
							delta: 1
						});
						// uni.navigateTo({
						// 	url:'../erweimalist/index'
						// })
					}
				});
				// addqrcode
				console.log(data);
			}
		},
		saveimg() {
			uni.getImageInfo({
				src: 'http://mobile.suxin88.com:808/zhifu.png',
				success: function(image) {
					console.log('图片信息：', JSON.stringify(image));
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '图片保存成功',
								icon: 'none'
							});
						}
					});
				},
				fail: function() {
					console.log('失败');
				}
			});
		},
		chooseImage: function(e) {
			let that = this;
			if (that.files.length >= 1) {
				this.tui.toast('最多上传1张图片');
				return;
			}
			uni.chooseImage({
				count: 9 - that.files.length,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					that.files = that.files.concat(res.tempFilePaths);
					console.log(res.tempFilePaths);
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: 'http://khdjk.suxin88.com:808/uploadfile', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'image',
						formData: {
							token: uni.getStorageSync('token')
						},
						success: res => {
							let temp = JSON.parse(res.data);
							_this.temppath = temp.data.img_url;
						}
					});
					//上传功能已去除
					//...
				}
			});
		},
		previewImage: function(e) {
			uni.previewImage({
				current: e.currentTarget.id, // 当前显示图片的http链接
				urls: this.files // 需要预览的图片http链接列表
			});
		},
		deleteImage: function(e) {
			const index = e.index;
			this.files.splice(index, 1);
		}
	},
	onLoad(e) {
		this.id = parseInt(e.id);
		_this = this;
		this.username = e.nickname;
		this.account = e.account;
		this.name = e.name;
		this.qrcode_id = e.qrcode_id;
		this.explain = e.explain;
		this.temppath = e.img_url;
		this.files[0] = e.img_url;
		this.accountid = e.userId;
		this.danmax = e.single_max;
		this.danmin = e.single_min;
		this.daymax = e.total_max;
		console.log(e);
	}
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
